<template>
  <div>
    <h1>测试$refs.xxx的用法</h1>
    <div>
      <div ref="btn">我是一个按钮</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Refs',
  created() {
    //直接使用this.$refs获取DOM元素
    console.log(this.$refs.btn); // undefined
    this.$nextTick(() => {
      console.log(this.$refs.btn)  //获取到正确元素
    })
  },
  mounted() {
    console.log(this.$refs.btn); //获取到正确元素
  }
}
</script>
